<template>
  <div class="menu_page">
    <template v-for="item in routes">
      <template v-if="!item.hidden">
        <template v-if="item.children.length > 0">
          <div class="menu_block">
            <h3>{{item.meta.title}}</h3>
            <div class="menu_sub">
              <template v-for="route in item.children">
                <template v-if="route.children&&route.children.length > 0">
                  <el-popover placement="bottom" trigger="click" popper-class="menu_popover">
                    <ul class="child_ul">
                      <template v-for="list in route.children">
                        <li v-if="!list.hidden">
                          <router-link :to="list.path">
                            {{ list.meta.title }}
                          </router-link>
                        </li>
                      </template>
                    </ul>
                    <template slot="reference">
                      <div class="menu_item">
                        <div class="icon_div"><i class="iconfont" :class="item.meta.icon"></i></div>
                        <div class="title_div ml15">
                          <p>{{ route.meta.title }}</p><i class="iconfont downIcon"></i>
                        </div>
                      </div>
                    </template>
                  </el-popover>
                </template>
                <template v-else>
                  <template v-if="!route.hidden">
                    <router-link :to="route.path">
                      <div class="menu_item pointer">
                        <div class="icon_div"><i class="iconfont" :class="item.meta.icon"></i></div>
                        <div class="title_div">
                          <p>{{ route.meta.title }}</p>
                        </div>
                      </div>
                    </router-link>
                  </template>
                </template>
              </template>
            </div>
          </div>
        </template>
      </template>
    </template>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    components: {},
    computed: {
      ...mapGetters([
        'routes'
      ]),
    },
    data() {
      return {

      }
    },
    created() {
    },
    mounted() {},
    methods: {
      // hasOneShowingChildren(children, parent) {
      //   const showingChildren = children.filter(item => {
      //     return !item.hidden
      //   })
      //   if (showingChildren.length === 0) {
      //     return true
      //   }
      //   return false
      // }
    }
  }

</script>
<style lang="scss" scoped>
  .menu_page {
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow: auto;

    .menu_block {
      h3 {
        font-size: 16px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: -16px;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 16px;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          background: #3967ff;
        }
      }

      .menu_sub {
        display: flex;
        flex-wrap: wrap;

        .menu_item {
          width: 120px;
          padding: 16px;
          text-align: center;
          display: flex;
          align-items: center;
          flex-direction: column;

          .icon_div {
            background: linear-gradient(-90deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, 0)), #3967ff;
            border-radius: 4px;
            overflow: hidden;
            position: relative;

            i {
              width: 44px;
              height: 44px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              color: #fff;
              font-size: 20px;
            }
          }

          .title_div {
            margin-top: 8px;
            align-items: center;
            display: flex;
          }

          &:hover {
            background: #f2f2f2;
            border-radius: 4px;

            .title_div {
              color: #3967ff;

              .downIcon {
              }
            }
          }
        }
      }
    }
  }

  .menu_popover {
    ul {
      li {
        text-align: center;
        cursor: pointer;

        a {
          display: block;
          padding: 5px;
          width: 100%;
          height: 100%;
        }

        &:hover {
          background: #f5f7fa;
        }
      }
    }
  }

</style>
